<template>
    <view class="home-card">
        <t-image t-class="home-card__image" :src="url" mode="aspectFill" />
        <view class="home-card__info">
            <text>{{ desc }}</text>
            <view class="home-card__tag-group">
                <t-tag size="small" variant="light" :theme="item.theme" v-for="(item, index) in tags" :key="index">{{ item.text }}</t-tag>
            </view>
        </view>
    </view>
</template>

<script>
import tImage from './tdesign-miniprogram/image/image';
import tTag from './tdesign-miniprogram/tag/tag';
export default {
    components: {
        tImage,
        tTag
    },
    data() {
        return {};
    },
    props: {
        url: String,
        desc: String,
        tags: Array
    },
    methods: {},
    created: function () {}
};
</script>
<style lang="less">
@import '/variable.less';

.home-card {
    display: inline-flex;
    flex-direction: column;
    width: 340rpx;
    height: 488rpx;
    border-radius: 9px;
    background: @bg-color-white;

    &__image {
        width: 340rpx;
        height: 340rpx;
    }

    &__info {
        padding: 32rpx;
        font-weight: 400;
        font-size: @font-size-small;
    }

    &__tag-group {
        display: flex;
        gap: 16rpx;
        margin-top: 16rpx;
    }
}
</style>
